import React, {useState} from 'react'
import './index.scss'
import {Route} from "react-router-dom";

import SideMenu from "../../components/SideMenu";
import JoinIn from "../contents/JoinIn";
import Manage from "../contents/Manage";
import Center from "../Personal/Center";
import Setting from "../Personal/Setting";
import AttPage from "../AttPage";
import UserAttPage from "../UserAttPage";

import { Layout } from 'antd';
const { Content } = Layout;

const showWidth = "calc(100% - 200px)"
const unShowWidth = "calc(100% - 82px)"

export default function MyContent() {
  const [isShow, setIsShow] = useState(false)
  return(
    <Content>
      <div className="site-layout-content">
        <SideMenu isShow={isShow} handleShow={setIsShow}/>

        <div className="content-box" style={{width: isShow?showWidth:unShowWidth}}>
          <Route exact path="/main">
            <JoinIn />
          </Route>

          <Route exact path="/main/manage">
            <Manage />
          </Route>

          <Route path="/main/personal/center">
            <Center />
          </Route>

          <Route path="/main/personal/setting">
            <Setting />
          </Route>

          <Route exact path="/main/manage/att/:id" component={AttPage}/>

          <Route path="/main/joinin/useratt/:id" component={UserAttPage}/>
        </div>

      </div>
    </Content>
  )
}